<template>
  <div>
    <div>1.后处理(发光描边OutlinePass)</div>
    <div ref="webgl"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { GlitchPass, OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';
  import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
  // 引入渲染器通道RenderPass
  import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
  // 引入OutlinePass通道
  import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
  // 引入UnrealBloomPass通道
  // import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  let controls: OrbitControls;
  let composer: any = null;
  onMounted(() => {
    init();
  });
  function init() {
    scene = new THREE.Scene();

    // 正投影相机
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度

    camera = new THREE.PerspectiveCamera(90, width / height, 1, 1000);
    camera.position.set(300, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    // 背景颜色
    render.setClearColor('#422517');
    render.setSize(width, height);
    webgl.value.appendChild(render.domElement);
    controls = new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);
    const pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(100, 100, 100);
    scene.add(pointLight);
    const pointLightHelper = new THREE.PointLightHelper(pointLight);
    scene.add(pointLightHelper);
    // 渲染循环
    composer = new EffectComposer(render);
    // 创建一个渲染器通道，场景和相机作为参数
    const renderPass = new RenderPass(scene, camera);
    // 设置renderPass通道
    composer.addPass(renderPass);

    const material = new THREE.MeshBasicMaterial({
      color: '#192ddb',
      opacity: 0.8,
      transparent: true,
    });

    const materialMesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);
    materialMesh.position.set(100, 100, 100);
    scene.add(materialMesh);
    // OutlinePass第一个参数v2的尺寸和canvas画布保持一致
    // const v2 = new THREE.Vector2(window.innerWidth, window.innerHeight);
    const v2 = new THREE.Vector2(800, 600);
    const outlinePass = new OutlinePass(v2, scene, camera);
    // 添加OutlinePass的模型
    outlinePass.selectedObjects = [materialMesh];
    //模型描边颜色，默认白色
    outlinePass.visibleEdgeColor.set(0xffff00);
    //高亮发光描边厚度
    outlinePass.edgeThickness = 4;
    //高亮描边发光强度
    outlinePass.edgeStrength = 6;
    //模型闪烁频率控制，默认0不闪烁
    outlinePass.pulsePeriod = 2;

    // 设置OutlinePass通道
    composer.addPass(outlinePass);

    // 3. 设置glitchPass通道
    // const glitchPass = new GlitchPass();
    // composer.addPass(glitchPass);
    renderFun();
  }

  function renderFun() {
    composer.render();
    // controls.update(); //update()函数内会执行camera.lookAt(controls.target)
    // render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
